<template>
  <section class="main-content">

    <div class="section-cont ls-add mt-10">
      <el-row class="section-container" :gutter="20">
        <el-col :span="24">
          <div class="grid-content">
            <ul v-if="catList.length > 0">
              <li v-for="item in catList" v-bind:key="item" @click="urlto('category?id='+item.id)">
                <a>
                <span v-if="params.id === item.id" style="color:tomato" >{{ item.title }}</span>
                <span v-else >{{ item.title }}</span>
                </a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="mainArticleList.length > 0" class="section-cont main-con mt-10">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col v-for="item in mainArticleList" v-bind:key="item" class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }" @click="urlto('article?id='+ item.id)">
              <div class="image" :style="'background-image: url(' + item.img +')'" ></div>
              <div class="image-text">
                <span>{{ item.title }}</span>
                <div>
                  <p class="card-des" :title="item.description">{{ item.description.substring(0,40) }}...</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>

      <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          class="mt-4"
          :page-size="size"
          :pager-count="4"
          :hide-on-single-page="value"
          style="margin-bottom: 40px;text-align: center;"
          @current-change="handleCurrentChange"
      />
    </div>


  </section>
</template>
<script>
export default {

  components: {
  },
  data() {
    return {
      catList:sessionStorage.getItem('access-catList')?JSON.parse(sessionStorage.getItem('access-catList')):[],
      mainArticleList:[],
      params:this.$route.params,
      total:0,
      page:1,
      size:20,
      value:true
    }
  },
  watch:{

  },
  async created(){
    console.log(this.$route.params.id)
    if(this.$route.params.id && this.$route.params.id > 0){
      await this.getDataByApi();
    }else{
      this.$router.push({name:'home'}).catch(err => {
        console.log(err)
      })
    }
  },
  methods: {
    handleCurrentChange(page){
      this.page = page
      this.getPageData(this.page)
    },
    async getDataByApi(){
      if(this.catList.length === 0){
        await this.$API.home.getCatList().then(res => {
          if(res.message === "OK"){
            this.catList = res.data
            sessionStorage.setItem('access-catList',JSON.stringify(this.catList))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }
      await this.getPageData(this.page)
    },
    async getPageData(page){
      await this.$API.home.getHotArticle({page:page,categoryId:this.params.id,ispage:1,size:this.size}).then(res => {
        if(res.message === "OK"){
          this.mainArticleList = res.data.records
          this.total = res.data.total
          this.page = res.data.current
          if(res.data.pages > 1){
            this.value = false
          }

        }else{
          this.$message.error('接口失效')
          return false;
        }
      })
    },
    paramsGet(key){
      const params = {};
      if(key.includes("&")){
        const mParams = key.split('&')
        for(const item in mParams){
          const temp = mParams[item].split('=')
          params[temp[0]] = temp[1]
        }
      }else{
        const temp = key.split('=')
        params[temp[0]] = temp[1]
      }
      return params;
    },
    urlto(key){
      console.log('jump:'+ key)
      if(key.includes("?")){
        const keyPath =  key.split('?')
        this.$router.push({name:keyPath[0],params:this.paramsGet(keyPath[1])}).catch(err => {
          console.log(err)
        })
      }else{
        this.$router.push({name:key}).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}


.swiper ul.swiper-right li:first-child{
  margin-bottom:20px;
}
.swiper ul.swiper-right .image{
  max-height:160px;
}
.swiper ul.swiper-right li .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.hot-arts .image{
  max-height:160px;
  width:100%;
  overflow: hidden;
}
.hot-arts .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}

.main-con{

}
.main-con .image{
  height:160px;
  width:100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.main-con .image-text{
  padding: 5px 14px 10px;
  overflow: hidden;
}
.main-con .image-text div p{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}
</style>

